﻿<%@ include file="/common/taglibs.jsp"%>
<!--分页查询共用的页面-->
<%@ include file="/common/common.jsp"%>
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

	<link rel="stylesheet" type="text/css" href="<%=ApplicationPath%>/video/timelineInfo.css">
	<title></title>

	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<link href="favicon.ico" type="image/x-icon" rel="shortcut icon">
	<script type="text/javascript" src="<%=ApplicationPath%>/video/ckplayer/ckplayer/ckplayer.js?v=82" charset="UTF-8"></script>
	<script type="text/javascript" src="<%=ApplicationPath%>/video/ckplayer/MyCkPlayer.js?v=62" charset="UTF-8"></script>

	<script type="text/javascript" src="<%=jsPath%>/videoHisRoute.js?v=70"></script>
	<script type="text/javascript" src="<%=jsPath%>/videoPlayer.js?v=11"></script>
	<script type="text/javascript" src="<%=jsPath%>/videoStatus.js?v=11"></script>

	<script type="text/javascript" src="<%=jsPath%>/jquery/jquery.timers.js"></script><!--定时器-->
	<script type="text/javascript" src="<%=jsPath%>/terminalCommand.js?v=11"></script>
	<script src="<%=jsPath%>/jquery/jquery.form.js" type="text/javascript"></script>
	<script type="text/javascript" src="<%=jsPath%>/jquery/jquery.validate.js"></script><!--表单数据验证-->
	<script type="text/javascript" src="<%=jsPath%>/jquery/jquery.metadata.js"  charset="UTF-8"></script><!--表单数据验证-->
	<style>
		.queryConditionTable td
		{
			padding:3px;
		}
	</style>

	<script>
        var vs = null;
        var simNo = "013200000003";
        var stream = 0;
        var plateNo = null;


        window.onbeforeunload = function (e) {
            //return (e || window.event).returnValue = '有信息未保存，确认离开？！';
        }
        window.onunload = function (e) {
            //return (e || window.event).returnValue = '有信息未保存，确认离开？！';
        }

        /**
         * 当easyui的dialog 被关闭的时候，会自动调用此方法，停止监听
         * @returns {boolean}
         */
        function onWindowBeforeClose()
        {
            $("#btnPausePlayBack").click();
            return true;
        }


        function renderTemplate(record)
        {
            return window.parent.renderTemplate(record);
        }

        function getRadioColumn(value, rowData, rowIndex)
        {
            var mediaId = rowData.mediaDataId;
            var html =   '<input type="radio" name="selectRadio" onclick="selectMedia(' + mediaId + ');"    value="' + mediaId + '" />';
            return html;

        }

        function onCommandSuccess(result)
        {
            if(result.success)
            {
                $("#btnStopPlayBack").linkbutton('enable');
                $("#btnPausePlayBack").linkbutton('enable');
                $("#btnFastBackForward").linkbutton('enable');
                $("#btnFastForward").linkbutton('enable');
                $("#btnPlayByPos").linkbutton('enable');
            }
        }



        function isButtonDisabled(btnId)
        {
            var opts = $("#"+btnId).linkbutton("options");
            return   true == opts.disabled;
        }

        function onPanelResize(width, height)
        {
        }

        //初始化地图
        function initMap()
        {
            var mapUrl = window.parent.globalConfig.mapPath;
            if(mapUrl == null)
                return;
            if(mapUrl.indexOf('?') < 0)
                mapUrl += '?hisRoute=true';
            else
                mapUrl += '&hisRoute=true';
            $("#routeMapFrame").attr("src", mapUrl);

        }

        var playerTime = [0,0,0,0];


        var currentCKPlayer = null;

        function myPause()
        {
            if(currentCKPlayer != null)
                currentCKPlayer.getCkPlayer().videoPause();
        }
        //var keyFrameTime = [0, 10, 28, 37, 45, 54];

        function playKeyFrame()
        {
            $.each(players, function(i,p)
            {
                if(p.keyFrames == null)
                    return;
                var metaData = p.getCkPlayer().getMetaDate();
                var duration = metaData['duration'];
                var index = playerTime[i];
                if(index < 0 || index >= p.keyFrames.length ) {
                    //alert('请填写大于0的数字');
                    //p.getCkPlayer().videoSeek(0);
                    p.getCkPlayer().videoPause();
                    stopPlayTimer();
                    return;
                }
                var time = parseFloat(p.keyFrames[index]);
                if(time > duration) {
                    //alert('请填写小于' + duration + '的数字');
                    //stopPlayKeyFrame();
                    p.getCkPlayer().videoSeek(0);
                    p.getCkPlayer().videoPause();
                    stopPlayTimer();
                    return;
                }
                p.getCkPlayer().videoSeek(time);
                currentCKPlayer = p;
                window.setTimeout(myPause,100);
                //.getCkPlayer().videoPause();
                console.log("seek:" + time);
                playerTime[i] = index+1;
            });
        }


        function backPlayKeyFrame()
        {

            $.each(players, function(i,p)
            {
                if(p.keyFrames == null)
                    return;
                var metaData = p.getCkPlayer().getMetaDate();
                var duration = metaData['duration'];
                var index = p.keyFrames.length - playerTime[i] - 1;
                if(index < 0 || index >= p.keyFrames.length ) {
                    //alert('请填写大于0的数字');
                    p.getCkPlayer().videoPause();
                    stopPlayTimer();
                    return;
                }
                var time = parseFloat(p.keyFrames[index]) ;
                if(time > duration) {
                    //alert('请填写小于' + duration + '的数字');
                    //stopPlayKeyFrame();
                    p.getCkPlayer().videoPause();
                    return;
                }
                p.getCkPlayer().videoSeek(time);
                playerTime[i] +=1;
            });
        }

        function stopPlayTimer()
        {
            if (playerTimer) {
                clearInterval(playerTimer);
                playerTimer = null;
            }
        }


        var playerTimer = null;
        function startPlayKeyFrame() {
            if (playerTimer) {
                clearInterval(playerTimer);
            }

            $.each(players, function(i,p)
            {
                p.getCkPlayer().videoMute();
                playerTime[i] = 0;//p.getProgressTime();
            });
            playerTimer = setInterval(playKeyFrame, 1000);
        }

        function stopPlayKeyFrame()
        {
            if(playerTimer)
            {
                clearInterval(playerTimer);
                playerTimer = null;
            }
            playerTime = [0,0,0,0];
        }

        //var backPlayerTimer = null;
        function startBackPlayKeyFrame()
        {
            if (playerTimer) {
                clearInterval(playerTimer);
            }
            $.each(players, function(i,p)
            {
                p.getCkPlayer().videoMute();
                playerTime[i] = 0;// p.getProgressTime();
            });
            playerTimer = setInterval(backPlayKeyFrame,150);
        }

        function stopBackPlayKeyFrame()
        {
            playerTime = [0,0,0,0];
            if(backPlayerTimer)
            {
                clearInterval(backPlayerTimer);
            }
            playerTime = [0,0,0,0];
        }

        //进入全屏
        function requestFullScreen(element) {
            var de = document.querySelector(element) || document.documentElement;
            if (de.requestFullscreen) {
                de.requestFullscreen();
            } else if (de.mozRequestFullScreen) {
                de.mozRequestFullScreen();
            } else if (de.webkitRequestFullScreen) {
                de.webkitRequestFullScreen();
            }
        }


        var players = [];
        $(document).ready(function () {
            initMap();
            var strVideoResource = "${videResourceUrls}";

            var strKeyFrames = "${strKeyFrame}";
            var keyFrameMap = {};
            if(strKeyFrames.length > 0) {
                var strKeyFrame = strKeyFrames.split(";");
                if(strKeyFrame != null && strKeyFrame.length > 0)
                {
                    var resourceNum = strKeyFrame.length;
                    for(var m = 0; m < resourceNum; m++) {
                        var keyFrames = strKeyFrame[m].split(",");
                        keyFrameMap[m] = keyFrames;
                    }
                }
            }
            if(strVideoResource.length > 0)
            {
                var strResource = strVideoResource.split(",");
                var resourceNum = strResource.length;
                for(var m = 0; m < resourceNum; m++)
                {
                    var resourceUrl = "<%=ApplicationPath%>/media/" + strResource[m];
                    var index = m+1;
                    var keyFrame = keyFrameMap[m];
                    var myCkPlayer = new MyCkPlayer("video_" + index, resourceUrl, keyFrame);
                    players.push(myCkPlayer);
                }

                if(resourceNum == 1)
                {
                    $("#video_1").css("width",685);
                    $("#video_1").css("height",565);
                    $("#video_2").hide();
                    $("#video_3").hide();
                    $("#video_4").hide();
                }
            }


            // queryResourceList();
            $("#btnSlowPlayBack").click(function()
            {
                $.each(players, function(i,p)
                {
                    p.getCkPlayer().changePlaybackRate(0);
                })
            });
            $("#btnPausePlayBack").click(function()
            {
                $.each(players, function(i,p)
                {
                    p.getCkPlayer().videoPause();
                })

                stopPlayKeyFrame();
            });
            $("#btnFastForward").click(function()
            {
                $.each(players, function(i,p)
                {
                    p.getCkPlayer().changePlaybackRate(5);
                })
            });

            $("#btnPlaykeyFrame").click(function()
            {
                startPlayKeyFrame();
            });

            $("#btnBackPlaykeyFrame").click(function()
            {
                startBackPlayKeyFrame();
            });



            $("#btnPlayBack").click(function()
            {
                $.each(players, function(i,p)
                {
                    p.getCkPlayer().changePlaybackRate(1);
                    p.getCkPlayer().videoPlay();
                })
            });

            $("#btnFullScreen").click(function()
            {
                requestFullScreen("#videoPanelCenter");
            })


        });



	</script>

</head>

<body class="easyui-layout">
<div id="videoToolbar" data-options="region:'north',border:'false'" style="height:45px;padding-top:5px;">
	<form id="queryForm" action='<%=ApplicationPath%>/videoPlayBack/sendRequest.action'  method="post" style="margin-bottom: 2px;">
		<input type="hidden"  name="vehicleId"  id="vehicleId" value="0"/>
		<input type="hidden"  name="playBackPos"  id="playBackPos" value="0"/>
		<table cellpadding="5" class="queryConditionTable">

			<tr>
				<td >
					<a id="btnPlayBack" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-play',disabled:false" >播放</a>
					<a id="btnPausePlayBack" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',disabled:false">停止</a>
					<a id="btnFastForward" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',disabled:false">快放</a>
					<a id="btnSlowPlayBack" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-no',disabled:false">慢放</a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a id="btnPlaykeyFrame" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-excel'">关键帧播放</a>
					<a id="btnBackPlaykeyFrame" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',disabled:false">关键帧快退</a>
					<!--
                    <a id="btnFullScreen" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',disabled:false">全屏</a>
                    -->

					<span class="commandMsg"></span>
				</td>

			</tr>
		</table>
	</form>
</div>

<!--
<div id="hisMap" data-options="region:'east',border:false,split:true" style="display:none;width:100px;">
    <iframe id="routeMapFrame" scrolling="no" frameborder="0"  src="" style="width:100%;height:99%;"></iframe>
</div>
-->


<div id="videoPanelCenter" data-options="region:'center',border:false,onResize:onPanelResize" >

	<div id="video_1" style="width: 342px; height: 280px;float:left;margin-right:1px;margin-bottom:1px;"></div>
	<div id="video_2" style="width: 342px; height: 280px;float:left;margin-bottom:1px;"></div>
	<div style="clear:both"></div>

	<div id="video_3" style="width: 342px; height: 280px;float:left;margin-right:1px;"></div>
	<div id="video_4" style="width: 342px; height: 280px;float:left;"></div>
</div>



</body></html>